<template>
  <div class="manage-search">
    <!-- 筛选 -->
    <div class="filter">
      <div class="hasSelect" v-if="showSelect">
        <span class="nor">已选条件</span>
        <span class="sel" v-if="saveData.devname" @click="alone('type')">{{saveData.devname}}</span>
        <span class="sel" v-if="saveData.siteStatus" @click="alone('site')">{{saveData.siteStatus}}</span>
        <span class="clearAll" @click="clearAll()">清除全部</span>
      </div>





      <div class="condition">
        <div class="area">
          <div style="width:170px;float:left;">
            <div class="classification">设备类型</div>
            <div class="all" :class="{'active':isChecktype === 0}"  @click='addTypeStatus("")'>全部</div>
          </div>
          <div style="width:calc(100% - 170px);float:left;">
            <ul class="more">
              <li>
                <span
                  :class="['spancolor',{'active':isChecktype === 1}]"
                  @click="addTypeStatus('消防栓')"
                >消防栓</span>
              </li>
              <li>
                <span
                  :class="['spancolor',{'active':isChecktype === 2}]"
                  @click="addTypeStatus('烟感设备')"
                >烟感设备</span>
              </li>
            </ul>
          </div>
         </div>
        <!-- <div class="area">
          <div style="width:170px;float:left;">
            <div class="classification">设备归属</div>
            <div class="all" :class="{'active':isCheckarea === 'all'}"  @click='checkAll("","","all")'>全部</div>
          </div>
          <div style="width:calc(100% - 170px);float:left;">
            <ul class="more">
              <li v-for="(item,i) in area_list_data" :key="i"  >
                <span class="more-con" @click="checkAll(item,i)" :class="{'active':isCheckarea ===  item.name}">{{item.name}}</span>
              </li>
            </ul>
          </div>
        </div> -->
         
      </div>

    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
// import Config from "@/config";
export default {
  name: 'SearchStore',
  data: function () {
    return {
      area_list_data: [],
      //选中的dom
      isCheckarea: 'all',
      isChecktype: 0,
      saveData: {
        // 设备归属
        siteStatus:'',
        // 选中设备类型
        // devname: '',
      },
      // 传递的数据
      datas: {
        // 接收
        typestatus: '',
        sitestatus: '',
        // siteId: '' // 站点id
      },
      // show
      showSelect: false,
      // 保存一打开的初始编码,清空用
      clear: null,
    }
  },
  watch: {
    saveData: {
      deep: true,
      handler(data){
       let flag = 0
        for(let i in this.saveData) {
          if (!this.saveData[i]) {
            flag ++
          }
        }
        if (flag !== 2) {
          this.showSelect = true;
        } else {
          this.showSelect = false;
        }
      }
    },
    datas: {
      deep: true,
      handler(data){
        // 一开始初始编码
        if (!this.clear) {
          this.clear = JSON.parse(JSON.stringify(data))
        }
        this.$emit('search_data', this.datas)
      }
    }
  },
  methods: {
    //区域全选
    // checkAll(data,i, item) {
    //   console.log(data,i,item)
    //   if (item) {
    //     this.isCheckarea = item
    //   } else {
    //     this.isCheckarea = data.name
    //   }
    //   this.saveData.siteStatus = data.name;
    //   this.datas.sitestatus = data.name
    //   this.datas.siteId = data.id

    // },
    // 添加设备类型
    addTypeStatus(data){
      if (data === '') {
        this.isChecktype = 0;
      } else if (data === '消防栓') {
        this.isChecktype = 1;
      }else{
        this.isChecktype = 2;
      }
      this.saveData.devname = data;
      this.datas.typestatus = data
    },
     // 清空所有
    clearAll() {
      this.addTypeStatus('')
      this.checkAll('all')
      // this.datas = JSON.parse(JSON.stringify(this.clear))
    },
    // 清除单个
    alone(data) {
      switch (data) {
        case 'type':
        this.addTypeStatus('')
        break
        // case 'site':
        // this.checkAll('')
        // break
      }
    },



    //筛选列表接口
    // filteData () {
      // var url = ''
      // var params = {}
      // if (this.role[0].sort === 93) {
      //   url = `${Config.DEVICE_MANAGE_URL}/storehouses/query_common?page=0&size=100`;
      //   params.housetype = "test";
      // } else if (this.role[0].sort == 60 && this.district.districtType === 2) {
      //   params.province = this.district.districtId;
      // } else if (this.role[0].sort == 60 && this.district.districtType === 3) {
      //   params.city = this.district.districtId;
      // } else if (this.role[0].sort !== 100) {
      //   params.housetype = "official";
      //   url = `${Config.DEVICE_MANAGE_URL}/storehouses/query_common?page=0&size=100&store_level=1`;
      // }else if (this.role[0].sort === 100){
      //   url = `${Config.DEVICE_MANAGE_URL}/storehouses/query_common?page=0&size=100`;
      // }
      // this.$http.get(url, params).then(res => {
      //   this.area_list_data = res.array
      // });  

    // },

  },
  computed: {
    ...mapGetters('user', {
      module: 'dealedModule',
      user: 'getUser',
      role: 'getRole',
      district: 'getDistrict'
    })
  },
  mounted() {
      // console.log('user ', this.user)
      // console.log('district ', this.district)
      // console.log('getRole ', this.role[0])
      // this.filteData()
  }
}
</script>
<style lang="scss" scoped>
@import "../../../../../../static/scss/common.scss";
.manage-search{
  margin-bottom: 24px;
  // 搜索
    .filter {
    width: 100%;
    height: auto;
    background: $white;
    padding: 0px 25px;
    box-sizing: border-box;
    .active {
      background: $red;
      padding: 0px 6px;
      color: $white !important;
      border-radius: 10px;
      text-align: center;
      min-width: 22%;
    }
    .hasSelect {
      cursor: pointer;
      padding-bottom: 20px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 12px;
      padding-top: 16px;
      .nor {
        font-size: 14px;
        color: $gray3;
        margin-right: 18px;
      }
      .sel {
        border: 1px solid $red;
        color:$red;
        height: 18px;
        margin-right: 10px;
        padding: 0px 20px 0px 10px;
        border-radius: 10px;
        position: relative;
      }
      .sel::after {
        position: absolute;
        display: block;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        content: " ";
        width: 15px;
        height: 8px;
        background: url("/static/image/device/sel.png") no-repeat;
      }
      .clearAll {
        color: $gray9;
      }
    }
    .condition {
      .area {
        padding: 17px 0 0;
        line-height: 20px;
        .classification {
          width: 85px;
          color: $gray3;
          font-size: 14px;
          float: left;
        }
        .all {
          text-align: center;
          color: $gray3;
          float: left;
          font-size: 14px;
          cursor: pointer;
        }
        .more {
          color: $gray6;
          float: left;
          border-bottom: 1px solid #f0f0f0;
          width: 100%;
          padding-bottom: 6px;
          li {
            float: left;
            height: 28px;
            font-size: 14px;
            cursor: pointer;
            min-width: 120px;
            position: relative;
            text-align: center;
            .more-con,
            .spancolor {
              color: #333;
              display: inline-block;
            }
          }
        }
        .more.bb {
          border: 0;
        }
      }
      .area:after {
        content: "";
        clear: both; /*清除浮动*/
        display: block; /*确保该元素是一个块级元素*/
      }
    }
  }
}
</style>
